<template>
  <div class="home">
    <!-- 轮播图 -->
    <div style="width: 85%;padding-top: 20px;margin: 0 auto;">
      <el-carousel :interval="4000" type="card" indicator-position="none">
          <el-carousel-item >
            <img style="width: 100%;height: 280px;border-radius: 10px 10px;"  src="../../assets/images/Banner1.png"/>
          </el-carousel-item>
          <el-carousel-item >
            <img style="width: 100%;height: 280px;border-radius: 10px 10px;"  src="../../assets/images/Banner2.png" />
          </el-carousel-item>
          <el-carousel-item >
            <img style="width: 100%;height: 280px;border-radius: 10px 10px;"  src="../../assets/images/Banner3.png" />
          </el-carousel-item>
        </el-carousel>
    </div>
    <!-- 四个列表 -->
    <div class="center" style="width: 1350px;">
      <div style="margin-bottom: 30px">
        <el-row :gutter="40">
          <el-col :span="12">
            <div class="list">
              <div class="list_top">
                <div>招标预告</div>
                <div class="pointer" @click="goToNoticeList(1)">
                  查看更多 <i class="el-icon-d-arrow-right"></i>
                </div>
              </div>
              <div class="list_items">
                <template v-if="previewList.length > 0">
                  <div
                    class="list_item pointer"
                    v-for="(item, index) in previewList"
                    :key="index"
                    @click="goToDetails(item.listId)"
                  >
                    <span class="BeyondHiding" style="width: 380px">
                      <i class="el-icon-share"></i>&nbsp&nbsp
                      {{ item.title }}
                    </span>
                    <span
                      ><i class="el-icon-time"></i>&nbsp{{
                        item.releaseTime
                      }}</span
                    >
                  </div>
                </template>

                <div v-else class="nullList">暂无数据！</div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="list">
              <div class="list_top">
                <div>招标公告</div>
                <div class="pointer" @click="goToNoticeList(2)">
                  查看更多 <i class="el-icon-d-arrow-right"></i>
                </div>
              </div>
              <div class="list_items pointer">
                <template v-if="AnnouncementList.length > 0">
                  <div
                    class="list_item"
                    v-for="(item, index) in AnnouncementList"
                    :key="index"
                    @click="goToDetails(item.listId)"
                  >
                    <span class="BeyondHiding" style="width: 380px">
                      <i class="el-icon-share"></i>&nbsp&nbsp
                      {{ item.title }}
                    </span>
                    <span
                      ><i class="el-icon-time"></i>&nbsp{{
                        item.releaseTime
                      }}</span
                    >
                  </div>
                </template>
                <div v-else class="nullList">暂无数据！</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row :gutter="40">
          <el-col :span="12">
            <div class="list">
              <div class="list_top">
                <div>中标公告</div>
                <div class="pointer" @click="goToNoticeList(3)">
                  查看更多 <i class="el-icon-d-arrow-right"></i>
                </div>
              </div>
              <div class="list_items">
                <template v-if="BtainBidList.length > 0">
                  <div
                    class="list_item pointer"
                    v-for="(item, index) in BtainBidList"
                    :key="index"
                    @click="goToDetails(item.listId)"
                  >
                    <span class="BeyondHiding" style="width: 380px">
                      <i class="el-icon-share"></i>&nbsp&nbsp
                      {{ item.title }}
                    </span>
                    <span
                      ><i class="el-icon-time"></i>&nbsp{{
                        item.releaseTime
                      }}</span
                    >
                  </div>
                </template>
                <div v-else class="nullList">暂无数据！</div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="list">
              <div class="list_top">
                <div>企业采购</div>
                <div class="pointer" @click="goToNoticeList(4)">
                  查看更多 <i class="el-icon-d-arrow-right"></i>
                </div>
              </div>
              <div class="list_items">
                <template v-if="EnterpriseList.length > 0">
                  <div
                    class="list_item pointer"
                    v-for="(item, index) in EnterpriseList"
                    :key="index"
                    @click="goToDetails(item.listId)"
                  >
                    <span class="BeyondHiding" style="width: 380px">
                      <i class="el-icon-share"></i>&nbsp&nbsp
                      {{ item.title }}
                    </span>
                    <span
                      ><i class="el-icon-time"></i>&nbsp{{
                        item.releaseTime
                      }}</span
                    >
                  </div>
                </template>
                <div v-else class="nullList">暂无数据！</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>

import { getListByPage } from "@/api/procurement/list";
export default {
  data() {
    return {
      previewList: [],
      AnnouncementList: [],
      BtainBidList: [],
      EnterpriseList: [],
    };
  },
  mounted() {
    this.getPreviewList();
    this.getAnnouncementList();
    this.getoBtainBidList();
    this.getEnterpriseList();
  },
  methods: {
    // 跳转到详情页
    goToDetails(id) {
      this.$router.push({
        name: "noticeDetails",
        query: {
          listId: id,
        },
      });
    },
    // 跳转公告列表
    goToNoticeList(type) {
      this.$router.push({
        name: "noticeList",
        query: {
          noticeType: type,
        },
      });
    },
    // 招标预告
    getPreviewList() {
      getListByPage({
        listType: 1,
        announcementType: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.previewList = res.data.slice(0, 6);
          console.log(this.previewList);
        }
      });
    },
    // 招标公告
    getAnnouncementList() {
      getListByPage({
        listType: 1,
        announcementType: 2,
      }).then((res) => {
        if (res.code == 200) {
          this.AnnouncementList = res.data.slice(0, 6);
        }
      });
    },
    // 中标公告
    getoBtainBidList() {
      getListByPage({
        listType: 1,
        announcementType: 3,
      }).then((res) => {
        if (res.code == 200) {
          this.BtainBidList = res.data.slice(0, 6);
        }
      });
    },
    // 企业采购
    getEnterpriseList() {
      getListByPage({
        listType: 1,
        announcementType: 4,
      }).then((res) => {
        if (res.code == 200) {
          this.EnterpriseList = res.data.slice(0, 6);
        }
      });
    },
  },
};
</script>
<style scoped>
.nullList {
  height: 192px;
  line-height: 192px;
  text-align: center;
  color: #666;
  font-size: 20px;
}
.home {
  background-color: #f5f5f5;
  padding-bottom: 100px;
}
.list {
  border-radius: 15px;
  overflow: hidden;
  background-color: #fff;
}
.list_top {
  display: flex;
  justify-content: space-between;
  background:repeating-linear-gradient(to right, #259440,#a2dbb7);
  line-height: 55px;
  padding: 0 30px;
  height: 55px;
}
.list_top > div:nth-child(1) {
  color: #fff;
  font-size: 20px;
}
.list_top > div:nth-child(2) {
  color: #494949;
  font-size: 14px;
}
.list_items {
  padding: 20px;
  min-height: 232px;
}
.list_item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.BeyondHiding {
  width: 480px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list_item:hover {
  background-color: #e5e5e544;
}
</style>
